<template>
    <!-- 简答 -->
    <div class="ShortProblem">
        <div class="porblem-title">
            <Mtitle :title="title" :top="18" :bottom="10" />
            <div class="textarea_wrap">
                <textarea v-model="text" @blur="blurTxt()" />
            </div>
        </div>
    </div>
</template>
<script>
import { Radio, Toast } from 'vant'
import Mtitle from '@/components/global_title.vue' 
export default {
    components: {
        Radio,
        Toast,
        Mtitle
    },
    props: {
        // 题目详情
        details: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            text: '',
            answer_id: this.details.questionId,
            title: this.details.questionTitle, // 标题
            option: this.details.questionItem // 选项
        }
    },
    watch: {
        // text(news) {
        //     console.log(news)
        // }
    },
    mounted() {
        // 后台返回的数据默认存储到本地存储里面
        sessionStorage.setItem('answerd', JSON.stringify({select: this.details.answer, answer_id: this.details.id}))
    },
    methods: {
        // 将答案缓存到本地存储里面
        blurTxt() {
            console.log(this.text, this.details)
            const answer = JSON.parse(sessionStorage.getItem('answer_obj')) || []
            let data = {
                attach: this.text,
                questionId: this.details.questionId,
                // questionItemId: this.details.questionItemId,
                templateId: this.details.templateId,
                // userId: this.userId,
                userTemplateId: this.details.userTemplateId
            }
            answer.push(data)
            sessionStorage.setItem('answer_obj', JSON.stringify(answer))
        }
    }
}
</script>
<style scoped lang="scss">
.textarea_wrap {
    margin-top: -10px;
    textarea {
        list-style: none;
        width: 80%;
        height: 30px;
        border: none;
        border-bottom: 2px solid rgb(196, 194, 194);
        font-size: 14px;
    }
}
::v-deep.van-radio-group {
    display: flex;
    flex-wrap: wrap;
}
::v-deep.van-radio-group .van-radio {
    margin-right: 20px;
    margin-bottom: 15px;
}
::v-deep.van-radio-group .van-radio__label {
    font-size: 14px !important;
    font-weight: 500;
    color: #172b4d;
}
.agree_van-radio ::v-deep .van-radio-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    >p {
        font-size: 14px;
        margin-left: -20px;
        color: #40ba9b;
        font-weight: 500;
    }
}
</style>
